<template>
  <div class="root">
    <div class="top">
      <span class="logo">XLKBLOG</span>
      <button class="addArticle" type="button" @click="addArticle()">保存至笔记</button>
      <button class="addDiary" type="button" @click="addDiary()">保存至想说</button>
    </div>
    <div class="articleImg">
      <label>主图</label>
      <el-tooltip class="item" effect="dark" content="添加/删除" placement="top">
        <div class="imgLabel" @mouseover="showDeleteBtn()" @mouseout="hideDeleteBtn">
          <button type="button" id="deleteImgBtn" @click="deleteImg()" style="visibility:hidden">删除</button>
          <label for="imgInput"></label>
        </div>
      </el-tooltip>
      <input type="file" id="imgInput" ref="file" @change="uploadImg" />
      <p id="imgName"></p>
    </div>
    <div style="clear: left">
      <label for="titleInput">标题</label>
      <input class="titleInput" id="titleInput" v-model="article.title" type="text" />
    </div>
    <div class="kind">
      <div class="checkedKind">
        <label style="margin-right: 40px">标签</label>
        <el-tooltip effect="dark" content="点击删除" placement="top" v-for="(item,index) in article.kinds" :key="index">
          <el-button @click="cancelKind(index)">{{item}}</el-button>
        </el-tooltip>
      </div>
      <div class="primaryKinds">
        <p>预选标签</p>
        <button type="button" @click="checkedKind(kind.name)" v-for="kind in primaryKinds">{{kind.name}}</button>
      </div>
    </div>
    <div class="detail">
      <p>正文</p>
      <BlogEditor></BlogEditor>
    </div>
  </div>
</template>

<script>
  import BlogEditor from "./BlogEditor";
  import 'highlight.js/styles/monokai.css'
  export default {
    name: "AddBlog",
    components: {
      BlogEditor:BlogEditor
    },
    data(){
      return{
        article:{
          img:[],
          title: '',
          kinds: [],
          content :'',
        },
        primaryKinds: '', //预选标签
        editor: '',
      }
    },
    methods: {
      //选中标签
      checkedKind(kindName){
        let _this = this;
        let kinds = this.article.kinds;
        let flag = true;
        if(kinds.length!==0){
          kinds.forEach(function (e) {
            if(e===kindName){
              flag = false;
              _this.$message({
                message: '已经有这个标签了哦',
                type: 'warning',
              });
            }
          });
          if(flag){
            _this.article.kinds.push(kindName);
          }
        }else {
          _this.article.kinds.push(kindName);
        }
      },
      //取消标签
      cancelKind(kindIndex){
        this.article.kinds.splice(kindIndex,1);
      },
      //图片回显
      uploadImg(){
        let file = this.$refs.file.files[0];
        let fileType = file.name.substr((file.name.lastIndexOf("."))+1,file.name.length);
        let imgTypes = /jpg|jpeg|png|gif|bmp$/;
        if(imgTypes.test(fileType)){
          let s = URL.createObjectURL(file);
          document.getElementById("imgName").innerText='已选图片：'+file.name;
          document.getElementsByClassName("imgLabel")[0].style.backgroundImage="url(" +s+ ")"
        }else {
          document.getElementById("imgInput").value="";
          this.$message({
            showClose: true,
            message: '不支持'+fileType+'图片类型',
            type: 'error',
          });
        }
      },
      //显示删除按钮
      showDeleteBtn(){
        let fileValue = document.getElementById("imgInput").value;
        if(fileValue!==""){
          if(this.$refs.file.files.length!==0){
            let deleteImgBtn = document.getElementById("deleteImgBtn");
            deleteImgBtn.style.visibility = ''
          }
        }
      },
      //隐藏删除按钮
      hideDeleteBtn(){
        let deleteImgBtn = document.getElementById("deleteImgBtn");
        deleteImgBtn.style.visibility = 'hidden'
      },
      //删除图片
      deleteImg(){
        document.getElementById("imgInput").value="";
        document.getElementById("imgName").innerText='未选图片';
        document.getElementsByClassName("imgLabel")[0].style.backgroundImage='url(' + require('../assets/images/addArticleImg.png') + ')'
      },
      //添加到笔记验证表单是填写
      checkAddArticleInput(){
        let _this = this;
        let title = this.article.title;
        let kinds = this.article.kinds;
        let content = this.formattingParam(document.getElementsByClassName("w-e-text")[0].textContent);
        if(title==="" || title===null){
          _this.$message({
            showClose: true,
            message: '标题不能为空',
            type: 'error',
          });
          return false;
        }
        else if(kinds.length===0){
          _this.$message({
            showClose: true,
            message: '标签不能为空',
            type: 'error',
          });
          return false;
        }
        else if(content==="" || content===null){
          _this.$message({
            showClose: true,
            message: '主文不能为空',
            type: 'error',
          });
          return false;
        }
        return true;
      },
      //添加到说说验证表单是填写
      checkAddDiaryInput(){
        let _this = this;
        let fileValue = document.getElementById("imgInput").value;
        let title = this.article.title;
        let kinds = this.article.kinds;
        let content = this.formattingParam(document.getElementsByClassName("w-e-text")[0].textContent);

        if(fileValue!==""){
          _this.$confirm('保存至想说不需要主图,是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            document.getElementById("imgInput").value="";
            document.getElementById("imgName").innerText='';
            document.getElementsByClassName("imgLabel")[0].style.backgroundImage='url(' + require('../assets/images/addArticleImg.png') + ')';
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
          return false;
        }
        if(title==="" || title===null){
          _this.$message({
            showClose: true,
            message: '标题不能为空',
            type: 'error',
          });
          return false;
        }
        else if(kinds.length!==0){
          _this.$confirm('保存至想说不需要标签,是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            _this.article.kinds = [];
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
          return false;
        }
        else if(content==="" || content===null){
          _this.$message({
            showClose: true,
            message: '主文不能为空',
            type: 'error',
          });
          return false;
        }
        return true;
      },
      //提交
      addArticle(){
        let _this = this;
        if(this.checkAddArticleInput()){
          let title = _this.article.title;
          let kinds = _this.article.kinds;
          let content = _this.formattingParam(document.getElementsByClassName("w-e-text")[0].innerHTML);
          let uploadImg = this.$refs.file.files[0];

          let formData = new FormData();
          formData.append('uploadImg', uploadImg);
          formData.append('title', title);
          formData.append('kinds', kinds);
          formData.append('content', content);

          this.$axios({
            //图片上传重点
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            method: 'post',
            url: 'http://localhost:8088/addArticle',
            data: formData
          }).then(()=>{
            _this.$message({
              showClose: true,
              message: '发布成功',
              type: 'success',
            });
            _this.deleteImg();
            _this.article.title="";
            _this.article.kinds=[];
            document.getElementsByClassName("w-e-text")[0].innerHTML="";
          })
        }
      },
      //提交
      addDiary(){
        let _this = this;
        if(this.checkAddDiaryInput()){

          let title = _this.article.title;
          let content = _this.formattingParam(document.getElementsByClassName("w-e-text")[0].innerHTML);
          let formData = new FormData();
          formData.append('title', title);
          formData.append('content', content);

          this.$axios({
            method: 'post',
            url: 'http://localhost:8088/addDiary',
            data: formData
          }).then(()=>{
            _this.$message({
              showClose: true,
              message: '发布成功',
              type: 'success',
            });
            _this.article.title="";
            document.getElementsByClassName("w-e-text")[0].innerHTML="";
          })
        }
      },
      //格式化标题和摘要
      formattingParam(val) {
        val = val.replaceAll("{","&#123;");
        val = val.replaceAll("}","&#125;");
        val = val.replaceAll("\"","\'");
        val = val.replaceAll(":","&#58;");
        val = val.replaceAll("[","&#91;");
        val = val.replaceAll("]","&#93;");
        return val;
      }
    },
    mounted() {



      this.$axios({
        method: 'post',
        url: 'http://localhost:8088/findNodeKind'
      }).then((response) => {          //这里使用了ES6的语法
        this.primaryKinds = response.data;
      }).catch(() =>
        this.$message({
          message: '笔记标签加载失败，刷新试试',
          type: 'error',
        })
      );
    }
  }
</script>

<style scoped>
  .root{
    width: 75%;
    margin: 0 auto;
  }
  .top{
    padding-top: 10px;
    box-shadow: 0 15px 10px -15px #E2E2E2;
  }
  .top img{
    width: 120px;
    box-shadow: 6px 0 5px -5px #999;
  }
  .addArticle{
    float: right;
    width: 80px;
    border: none;
    background: #6bb645;
    height: 30px;
    border-radius: 5px;
  }
  .addArticle:hover{
    background: #66ae42;
  }
  .addArticle:active{
    transform: translateY(2px);
  }
  .addDiary{
    float: right;
    margin-right: 20px;
    width: 80px;
    border: none;
    background: #d273e4;
    height: 30px;
    border-radius: 5px;
  }
  .addDiary:hover{
    background: #b462c3;
  }
  .addDiary:active{
    transform: translateY(2px);
  }
  label{
    font-size: 16px;
    color: #646664;
  }
  .articleImg{
    margin-top: 40px;
  }
  .articleImg label{
    float: left;
    height: 50px;
  }
  .imgLabel{
    background: url("../assets/images/addArticleImg.png") no-repeat;
    background-size: 100% 100%;
    width: 80px;
    height: 40px;
    margin-left: 80px;
    border-radius: 5px;
  }
  .imgLabel button{
    border-radius: 5px;
    border: none;
    background: #e05252;
    position: absolute;
    float: left;
    margin: 10px 20px;
  }
  .imgLabel label{
    width: 80px;
    height: 40px;
  }
  #imgName{
    margin-left: 80px;
    font-size: 8px;
    color: #8e8e8e;
  }
  #imgInput{
    display: none;
  }
  .titleInput{
    width: 75%;
    height: 25px;
    border-radius: 5px;
    margin-top: 40px;
    font-size: 16px;
    border: solid rgba(134, 134, 141, 0.6) 2px;
    vertical-align:text-bottom;
    margin-bottom: -4px;
    margin-left: 40px;
  }
  .titleInput:focus{
    outline:none;
    border-radius: 5px;
    border: solid #489492 2px ;
  }
  .kind{
    margin-top: 40px;
  }
  .checkedKind{
    min-height: 35px;
  }
  .checkedKind button{
    color: black;
    border-radius: 5px;
    background: #9ecb45;
    padding: 5px 5px 5px 5px;
    font-size: 8px;
    font-weight: bold;
    margin-bottom: 5px;
    border: 1px solid rgba(132, 124, 125, 0.89);
  }
  .checkedKind button:hover{
    background: #de1d1db5;
    box-shadow: 3px 3px 3px rgba(22, 22, 22, 0.97);
  }
  .primaryKinds{
    background: #e5e5e5;
    border-radius: 5px;
    padding: 0 10px 10px 10px;
    margin-left: 80px;
  }
  .primaryKinds p{
    color: #646664;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 10px;
    margin-top: 5px;
  }
  .primaryKinds button{
    color: black;
    border-radius: 5px;
    background: #d3d3d3;
    padding: 5px 5px 5px 5px;
    font-size: 8px;
    margin-right: 5px;
    font-weight: bold;
    border: 1px solid rgba(132, 124, 125, 0.89);
    margin-bottom: 5px;
  }
  .primaryKinds button:hover{
    background: #a5a5a5;
  }
  .primaryKinds button:active{
    transform: translateY(2px);
  }
  .detail{
    margin-top: 40px;
  }
  .detail p{
    font-size: 16px;
    color: #646664;
  }
  #editor{
    margin-top: -40px;
    margin-left: 80px;
  }
</style>
<style>
  .w-e-toolbar{
    flex-wrap:wrap;
  }
</style>
